import { Button, Form, Input, Card, Space, message,Table, Popconfirm } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import  { ColumnsType } from "antd/lib/table";
import {
  reqBatchRemoveHospitalSet,
  reqGetHospitalSet,
  reqRemoveHospital,
} from "@/api/hospital/hospitalSet";
import { HospitalSetItems } from "@/api/hospital/model/hospitalSetTypes";
import { useNavigate } from "react-router-dom";

export default function HospitalSet() {
  //表格结构
  const columns: ColumnsType<any> = [
    {
      title: "序号",
      render: (value, row, index) => {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机号",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      fixed: "right",
      render: (value) => {
        return (
          <Space>
            <Button
              type="primary"
              onClick={() => {
                navigate(`/syt/hospital/hospitalSet/edit/${value.id}`);
              }}
              icon={<EditOutlined />}
            ></Button>
            <Popconfirm
              title="您确定要删除该条数据么?"
              onConfirm={remove(value.id)}
              okText="删除"
              cancelText="取消"
            >
              <Button
                type="primary"
                danger
                icon={<DeleteOutlined />}
              ></Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  //声明状态 管理与分页相关的数据
  let [total, setTotal] = useState(20);
  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(5);
  let [hospitalSet, setHospitalSet] = useState<HospitalSetItems>([]);
  let [loading, setLoading] = useState<boolean>(false);
  let [params, setParams] = useState<any>({ hosname: "", hoscode: "" });
  let [selectedKeys, setSelectedKeys] = useState<number[]>([]);

  //声明函数发送请求   使用 useCallback 可以缓存一个函数
  let getHospitalSet = useCallback(async () => {
    setLoading(true);
    //调用函数 发送请求
    let result = await reqGetHospitalSet({
      page: current,
      limit: pageSize,
      ...params,
    });
    //更新数据状态
    setHospitalSet(result.records);
    //更新分页总数的状态
    setTotal(result.total);
    setLoading(false);
  }, [current, pageSize, params]);

  useEffect(() => {
    getHospitalSet();
  }, [getHospitalSet]);

  //创建 form 对象
  let [form] = Form.useForm();

  //声明表单完成的事件
  let finish = async () => {
    //获取表单元素的值
    let fields = form.getFieldsValue();
    //更新 params 参数
    setParams(fields);
    //更新页码
    setCurrent(1);
  };

  let navigate = useNavigate();

  //声明函数
  let goAddHospitalSet = () => {
    navigate("/syt/hospital/hospitalSet/add");
  };

  //删除按钮的点击回调
  let remove = (id: string) => {
    return async () => {
      await reqRemoveHospital(id);
      //重新发送请求
      getHospitalSet();
      //提示
      message.success("删除成功");
    };
  };

  //批量删除的点击回调
  let batchRemove = async () => {
    await reqBatchRemoveHospitalSet(selectedKeys);
    //提示
    message.success('批量删除成功');
    //更新医院列表
    getHospitalSet();
  }

  return (
    <Card className="form">
      {/* 表单区域 */}

      <Form layout="inline" form={form} onFinish={finish}>
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>
        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>
        <Form.Item>
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>

        <Form.Item>
          <Button>清空</Button>
        </Form.Item>
      </Form>
      <div className="h-20"></div>

      {/* 按钮 */}
      <Space size="middle">
        <Button type="primary" onClick={goAddHospitalSet}>
          添加
        </Button>
        <Button onClick={batchRemove} disabled={selectedKeys.length === 0}>批量删除</Button>
      </Space>
      <div className="h-20"></div>

      {/* 表格部分 */}
      <Table
        loading={loading}
        dataSource={hospitalSet}
        columns={columns}
        bordered={true}
        rowKey="id"
        scroll={{ x: 1300 }}
        rowSelection={{
          type: 'checkbox',
          onChange: async (selectedRowKeys: React.Key[]) => {
            setSelectedKeys(selectedRowKeys as number[]);
          }
        }}
        pagination={{
          total, //数据的总数
          current, //当前的页码数
          pageSize, //每页显示的数量
          showQuickJumper: true, //显示快速跳转的组件
          showSizeChanger: true, //显示调整每页数量的组件
          pageSizeOptions: [2, 5, 10, 15],
          showTotal: (total) => {
            //显示总述
            return `总计 ${total} 条`;
          },
          onChange: (page: number, pageSize: number) => {
            //更新状态
            setCurrent(page);
            setPageSize(pageSize);
          },
        }}
      />
    </Card>
  );
}
